<template>
  <div class="table-box">
    <Table
        ref="table"
        :searchColumns="searchColumns"
        @getTableList="getTableList"
    >
      <template #tableHeader="scope">

<!--        <el-button type="danger" :icon="Delete"-->
<!--                   :disabled="BatchDeleteAble"-->
<!--                   plain @click="deleteSelectionLoginLog">-->
<!--          批量删除-->
<!--        </el-button>-->
      </template>
      <template #table>
        <!-- 表格主体 -->
        <el-table :data="tableList"
                  @selection-change="handleSelectionChange"
                  border
                  style="width: 100%">
          <el-table-column fixed type="selection" width="55" align="center"/>
          <el-table-column prop="username" fixed="left" align="center" label="登陆用户名" width="100"/>
          <el-table-column prop="browser" align="center" label="浏览器" width="150"/>
          <el-table-column prop="ipaddr" align="center" label="ip地址" width="150"/>
          <el-table-column prop="device" align="center" label="登陆设备" width="150"/>
          <el-table-column prop="loginLocation" align="center" label="登录位置" width="150"/>
          <el-table-column prop="os" align="center" label="操作系统" width="150"/>
          <el-table-column prop="msg" align="center" label="操作信息" width="150"/>
          <el-table-column prop="login_type" align="center" label="登陆方式" width="150"/>
          <el-table-column prop="status" align="center" label="登陆状态" width="150"/>
          <el-table-column prop="create_time" align="center" label="登陆时间" width="200"/>
<!--          <el-table-column align="center" fixed="right" label="操作" min-width="150px">-->
<!--            <template #default="scope">-->
<!--              <el-button-->
<!--                  size="small"-->
<!--                  @click="deleteLoginLog(scope)"-->
<!--                  type="danger">删除-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
      </template>
    </Table>
  </div>
</template>

<script setup name="systemLog">

// 需要搜索的配置项
import {onMounted, ref} from "vue";
import {deleteLoginInfoListApi, getLoginInfoListApi} from "@/api/modules/system/loginInfo.js";
import {CirclePlus, Delete} from "@element-plus/icons-vue";
import Table from "@/components/Table/index.vue";
import {ElMessage} from "element-plus";

const searchColumns = ref([
  {label: "账号", field: "username", searchType: "input"},
  {label: "登陆地点", field: "loginLocation", searchType: "input"},
])

const tableList = ref([])

onMounted(() => {
  getTableList()
})

const table = ref(null)
const searchArgsDict = ref({a:2})
const getTableList = async (searchArgs) => {
  const {data} = await getLoginInfoListApi(searchArgs)
  searchArgsDict.value = searchArgs
  tableList.value = data.data
  table.value.pageable.pageNum = data.page
  table.value.pageable.pageSize = data.pagesize
  table.value.pageable.total = data.total
}

let BatchDeleteAble = ref(true)
const selectionsIds = ref([])

const handleSelectionChange = (selections) => {
  BatchDeleteAble.value = !selections.length
  selections.forEach(item => {
    selectionsIds.value.push(item.id)
  })
}


const deleteLoginLog = async (scope) => {
  await deleteLoginInfoListApi({"ids": [scope.row.id]}).then(() => {
    ElMessage.success("成功");
    getTableList(searchArgsDict.value);
  })
}

const deleteSelectionLoginLog = async () => {
  await deleteLoginInfoListApi({"ids": selectionsIds.value}).then(() => {
    ElMessage.success("成功");
    getTableList(searchArgsDict.value);
  })
}

</script>
